<script setup lang="ts">
const Bonuses = defineSuspense(() => import('~comp-b/bonuses/index.vue'));

const { bonuseAvailableCount, bonusesQry } = queries.useBonusesQuery();
const { luckySpinFirstTipsState } = useFirstRechargeTips();

// 控制弹出层的可见性
const visible = ref(false);
const route = useRoute();

function onClick() {
  bonusesQry.refetch();
  luckySpinFirstTipsState.clickClose = true;
}
function click() {
  visible.value = false;
}
</script>

<template>
  <div class="relative flex-center">
    <APopover
      v-model:open="visible"
      overlayClassName="ant-cover__Popover-bonuses"
      placement="bottomRight"
      trigger="click"
      :arrow="false"
      transitionName="none"
      :getPopupContainer="(el: HTMLElement) => el.parentElement!"
    >
      <!-- 其余模板保持不变 -->
      <template #default>
        <ABadge
          :count="bonuseAvailableCount"
          size="small"
          :numberStyle="{ color: '#FFF', fontWeight: '500' }"
          @click="onClick"
        >
          <img
            v-if="$bp.ltTabletl"
            class="block size-8 cursor-pointer select-none active:(scale-90 brightness-100) hover:brightness-125"
            draggable="false"
            src="../../../assets/imgs/bonuses/treasure.png"
          >
          <div v-else class="treasureXL h-9 max-w-60 flex-between cursor-pointer select-none gap-2 rounded-lg px-3 shadow-2xl active:(scale-90 brightness-100) hover:brightness-125">
            <i class="i-local:treasure text-8" />
            <span class="text-sys-text-head">
              {{ $t('ditzIyOrmk2lu0T8zurAd') }}
            </span>
          </div>
        </ABadge>
      </template>
      <template #content>
        <Bonuses @click="click()" />
      </template>
    </APopover>
  </div>
</template>

<!-- 样式部分保持不变 -->
<style lang="scss">
.ant-popover.ant-cover__Popover-bonuses {
  padding-top: 14px;
  left: 0 !important;
  width: 400px;

  @media bp-lt-mobile {
    padding-top: 8px;
    //left: -54px !important;
    left: -74px !important;
    width: calc(100vw - 16px);
  }
}
.treasureXL {
  position: relative;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.5) 0%, rgba(143, 92, 6, 0.5) 100%);
  &:after {
    content: '';
    width: 60%;
    margin: 0 auto;
    height: 1px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(145, 94, 7, 0) 0%, #fbcc1c 51.5%, rgba(145, 94, 7, 0) 100%);
  }
  &:before {
    content: '';
    width: 60%;
    margin: 0 auto;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(241, 155, 11, 0) 0%, #fbcc1c 51.5%, rgba(241, 156, 11, 0) 100%);
  }
}
</style>
